@import (reference) "less-nameset";
/* ---------- progress ---------- */
.wi-progress{
    display: inline-block;
    position: relative;
}
.wi-progress-bar{
    display: inline-block;
    height: @progress-bar-h;
    vertical-align: middle;
    font-size: 0;
    overflow: hidden;
    width: @progress-bar-w;
    margin-left: .5em;
    margin-right: .5em;
    border: solid @border-size @progress-bcolor;
    background-color: @bg;
}
.wi-progress-value{
    height: 100%;
    width: 0;
    float: left;
    border: none;
    background: @progress-bar-bg;
}
.wi-progress-center{
    text-align: center;
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    overflow: hidden;
}
.wi-progress-top{
    text-align: center;
}
.wi-progress-left{
    display: inline-block;
    margin-right: .5em;
    vertical-align: middle;
}
.wi-progress-bottom{
    text-align: center;
}
.wi-progress-right{
    display: inline-block;
    margin-left: .5em;
    vertical-align: middle;
}

.wi-progress-bar-wave{
    .progress-bg-wave();
    -webkit-animation: progress-bar-wave 1s infinite linear;
    animation: progress-bar-wave 1s infinite linear;
}
@-webkit-keyframes progress-bar-wave{
    from {background-position: 0 0}
    to {background-position: 40px 0}
}
@keyframes progress-bar-wave{
     from {background-position: 0 0}
     to {background-position: 40px 0}
 }
:not(.wi-progress-bar-stage)>.wi-progress-remain{display:none;}
.wi-progress-remain{
    display: none;
    height: 100%;
    float: left;
    .progress-bg-stage();
}
